
<%@ page language="java" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>

    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .bac {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("images/admin/adminbac.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            opacity: 0.7;
        }

        #login_frame {
            width: 400px;
            height: 280px;
            padding: 13px;

            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -200px;
            box-shadow: -5px 5px 20px rgb(144, 143, 143);
            background-color: rgba(240, 255, 255, 0.9);

            border-radius: 10px;
            text-align: center;
        }

        form p>* {
            display: inline-block;
            vertical-align: middle;
        }

        #image_logo {
            margin-top: 22px;
        }

        .label_input {
            font-size: 14px;
            font-family: 宋体;

            width: 65px;
            height: 28px;
            line-height: 28px;
            text-align: center;

            color: white;
            background-color: #3CD8FF;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .text_field {
            width: 278px;
            height: 28px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border: 0;
        }
        .text_field_captcha {
            width: 192px;
            height: 28px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border: 0;
        }

        #btn_login {
            font-size: 14px;
            font-family: 宋体;

            width: 120px;
            height: 28px;
            line-height: 28px;
            text-align: center;

            color: white;
            background-color: #3BD9FF;
            border-radius: 6px;
            border: 0;

            float: left;
        }

        #forget_pwd {
            font-size: 12px;
            color: rgb(24, 14, 165);
            text-decoration: none;
            position: relative;
            float: right;
            top: 5px;

        }

        #forget_pwd:hover {
            color: blue;
            text-decoration: underline;
        }

        #login_control {
            padding: 0 28px;
        }
    </style>
</head>

<body>
    <div class="bac"></div>
    <div id="login_frame">
        <p id="image_logo"><img src="images/admin/htlog.png" style="width: 50px;height:50px;"></p>
        <form method="post" action="/adminLogin?opr=goLogin">
            <h3 style="color: red;padding: 20px;" id="titlerror">${msg}</h3>
            <p><label class="label_input">用户名</label><input type="text"  id="username" name="username" class="text_field" /></p>
            <p><label class="label_input">密码</label><input type="password"    id="password" name="password" class="text_field" /></p>
            <p><label class="label_input">验证码</label><input type="text"    id="captcha" name="captcha" class="text_field_captcha" />
                <img src='captcha' id='captchaImg' onclick="changeImg(this)" />
            </p>
            <div id="login_control">
                <input type="submit" id="btn_login" value="登录"  />
                <a id="forget_pwd" href="#">忘记密码？</a>
            </div>
        </form>
    </div>

</body>
<script>
    window.addEventListener("load",function(){
        document.getElementById("titlerror").style.display="none";
        if(${not empty msg}){
            document.getElementById("titlerror").style.display="block";
            document.getElementById("image_logo").style.display="none";
        }
    })
    function changeImg(img) {
					img.src = 'captcha?t=' + new Date().getTime();
				}
</script>

</html>